<!--
 * @Author: your name
 * @Date: 2021-10-31 12:22:37
 * @LastEditTime: 2021-11-02 20:49:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \练习\snake\src\components\Map.vue
-->
<template>
  <div class="game-box">
    <!-- 行 -->
    <div class="row"
         v-for='row in gameRow'
         :key='row'>
      <!-- 列 -->
      <div class="col"
           v-for='col in gameCol'
           :key='col'>
        <!-- 小格子 -->
        <!-- {{col}} -->
        <Cell :type="map[row-1][col-1]"></Cell>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Cell from './Cell.vue'
import { gameRow, gameCol } from '../game/map'
import { defineProps } from 'vue'

defineProps(['map'])
</script>

<style lang="scss" >
.game-box {
  background: #000;
  opacity: 0.85;
  border: 1px solid #fff;
  .row {
    display: flex;
  }
}
</style>